<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Language" content="en" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test for ""</title>
	
	<style type="text/css" media="all">
	
	body {
		background: #fff;
		margin: 0;
		padding: 0;
		font-family: Arial;
		font-size: 12px;
	}
	
	fieldset {
		margin: 20px;
	}
	
	.example {
		background: green;
		width: 400px;
		height: 200px;
		padding: 10px;
		margin: 10px;
		border: 5px solid red;
	}
	
	.helper {
		position: absolute;
		opacity: 0.5;
		background: black;
		width: 1px;
		height: 1px;
	}
	
	</style>

	<script type="text/javascript" src="../jquery-1.2.4b.js"></script>
	<script type="text/javascript" src="../ui.core.js"></script>	
	<script type="text/javascript" src="../ui.draggable.js"></script>
	<script type="text/javascript" src="../ui.droppable.js"></script>
	<script type="text/javascript" src="../ui.sortable.js"></script>
	<script type="text/javascript" src="../ui.resizable.js"></script>
	<script type="text/javascript" src="../ui.slider.js"></script>

	<script type="text/javascript">
	
	function num(el, prop) {
		return parseInt($.curCSS(el.jquery?el[0]:el,prop,true))||0;
	};

	function dimensions(e,level) {
		e = $(e); var o = e.offset();
		return {
			left: o.left - (level == 1 ? num(e,"marginLeft") : 0) + (level > 2 ? num(e,"borderLeftWidth") : 0) + (level > 3 ? num(e, "paddingLeft") : 0),
			top: o.top - (level == 1 ? num(e,"marginTop") : 0) + (level > 2 ? num(e,"borderTopWidth") : 0) + (level > 3 ? num(e, "paddingTop") : 0),
			width: level > 2 ? e.innerWidth() - (level > 3 ? num(e, "paddingLeft")+num(e, "paddingRight") : 0) : e.outerWidth(level == 1 ? 1 : 0),
			height: level > 2 ? e.innerHeight() - (level > 3 ? num(e, "paddingTop")+num(e, "paddingBottom") : 0) : e.outerHeight(level == 1 ? 1 : 0)
		};
	}
	
	$(document).ready(function(){
	
	});
	</script>
</head>
<body>

	<fieldset>
	<legend>Test for "dimensions"</legend>

		<div class="example">Example element</div>
			
		<div class="helper"></div>
		
		<ul>
			<li onmouseover="$('div.helper').css(dimensions('div.example',1))">margin</li>
			<li onmouseover="$('div.helper').css(dimensions('div.example',2))">border</li>
			<li onmouseover="$('div.helper').css(dimensions('div.example',3))">element</li>
			<li onmouseover="$('div.helper').css(dimensions('div.example',4))">padding</li>
		</ul>

	</fieldset>

</body>
</html>

